<style>
    .imageMap__container {
        display: inline-block;
        max-width: 800px;
        position: relative;
    }

    .imageMap__img {
        display: block;
        max-width: 100%;
        width: auto;
    }

    .imageMap__hotspot {
        position: absolute;
    }

    .imageMap__hotspot--rectangle {
        border: 2px solid white;
        background-color: rgba(0,0,0,.5);
    }

    .imageMap__hotspot--circle {
        border: 2px solid white;
        border-radius: 100%;
        background-color: rgba(0,0,0,.3);
        transform: translate(-50%, -50%);
    }

    .imageMap__hotspot--point {
        background-color: white;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
    }

    .imageMap__hotspot-text {
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: bold;
        font-family: sans-serif;
    }

    .imageMap__hotspot--point > .imageMap__hotspot-text {
        color: black;
    }
</style>

<div class="imageMap__container">
    <img class="imageMap__img" src="{{ image_map.image.url }}"/>

    {% for index, hotspot in image_map.hotspots %}
        {% set left = hotspot.hotspot.left * 100 %}
        {% set top = hotspot.hotspot.top * 100 %}

        {% if hotspot.hotspot.type == 'rectangle' %}
            {% set width = hotspot.hotspot.width * 100 %}
            {% set height = hotspot.hotspot.height * 100 %}

            <div class="imageMap__hotspot imageMap__hotspot--rectangle"
                 style="left: {{ left }}%; top: {{ top }}%; width: {{ width }}%; height: {{ height }}%;">
                <span class="imageMap__hotspot-text">{{ index + 1 }}</span>
            </div>
        {% elseif hotspot.hotspot.type == 'circle' %}
            {% set diameter = hotspot.hotspot.radius * 100 * 2 %}

            <div class="imageMap__hotspot imageMap__hotspot--circle"
                 style="left: {{ left }}%; top: {{ top }}%; width: {{ diameter }}%; padding-top: {{ diameter }}%;">
                <span class="imageMap__hotspot-text">{{ index + 1 }}</span>
            </div>
        {% elseif hotspot.hotspot.type == 'point' %}
            <div class="imageMap__hotspot imageMap__hotspot--point"
                 style="left: {{ left }}%; top: {{ top }}%;">
                <span class="imageMap__hotspot-text">{{ index + 1 }}</span>
            </div>
        {% endif %}
    {% endfor %}
</div>

{% for index, hotspot in image_map.hotspots %}
    <h2>#{{ index + 1 }}</h2>

    {% if hotspot.type == 'basic' %}
        <b>{{ hotspot.title|default }}</b>
        <p>{{ hotspot.description|default }}</p>
    {% elseif hotspot.type == 'advanced' %}
        <p>{{ hotspot.text|default|raw }}</p>
    {% endif %}
{% endfor %}
